<template>
  <div class="layout-view-container">
    <el-menu
      default-active="1"
      class="layout-view-nav"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1" >
        <div class="nav-logo">
          <img src="../assets/logo.png" alt="">
        </div>
      </el-menu-item>
      <el-menu-item v-for="route in routers" :key="route.path" :index="route.path" @click="navItemclick(route.path)">
        <i v-if="route.icon" :class="route.icon"></i>
        <span>{{route.text}}</span>
      </el-menu-item>
    </el-menu>
    <div class="layout-view-content">
      <router-view/>
    </div>
  </div>
</template>

<script>
import routers from '../router/index.js'
export default {
  data () {
    return {
      routers
    }
  },
  methods: {
    navItemclick (path) {
      this.$router.push(path)
    }
  }
};
</script>

<style lang='less' scoped>
.layout-view-container {
  height: 100%;
  display: flex;
  .layout-view-nav {
    min-width: 201px;
    padding-top: 20px;
    overflow: hidden;
    .nav-logo {
      text-align: center;
      img {
        width: 50px;
      }
    }
  }
  .layout-view-content {
    flex: 1;
    max-height: 100%;
    padding: 30px 0 30px 30px;
    overflow-y: auto;
    min-width: 1000px;
  }
}
</style>